<template>

  <div class="app-container">

    <!-- 表头 -->
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="openAddBanner">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格渲染 -->
    <el-table :data="banners" border style="width: 100%">
      <el-table-column fixed label="轮播图" align="center" width="350px">
        <template slot-scope="scope">
            <img :src="scope.row.imageUrl" style="width: 300px;" class="head_pic"
              onerror="javascript:this.src='https://gitee.com/wuhunyu/images/raw/master/learn/images/20210114220355.JPG'"/>
        </template>
      </el-table-column>
      <el-table-column fixed prop="title" label="名称" min-width="100px" sortable></el-table-column>
      <el-table-column fixed prop="linkUrl" label="链接地址">
        <template slot-scope="scope">
            <span style="color: blue;">{{scope.row.linkUrl}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="sort" label="排序" sortable></el-table-column>
      <el-table-column fixed="right" align="center" label="操作" min-width="240px">
        <template slot-scope="scope">
          <el-button type="warning" @click="openUpdateBanner(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deleteBanner(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="block">
      <el-pagination
        @current-change="changeCurrent"
        @size-change="changeLimit"
        :current-page="bannerQuery.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="bannerQuery.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 新增或修改banner对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisibleForBanner">
      <el-form>
        <!-- banner名称-->
        <input type="hidden" :value="banner.id">
        <el-form-item label="名称" label-width="100px">
          <el-input v-model="banner.title" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="banner图片" label-width="100px">
          <el-upload
              :on-success="uploadImageSuccess"
              :before-remove="beforeImageRemove"
              :file-list="fileList"
              :action="BASE_API+'/oss/updateFile'"
              :limit="1"
              :before-upload="handleExceed"
              class="upload">
          <el-button size="small" type="primary">上传图片</el-button>
          <el-tooltip placement="right-end">
            <div slot="content">最大支持 800Kb 图片</div>
            <i class="el-icon-question"/>
          </el-tooltip>
          </el-upload>
        </el-form-item>
        <el-form-item label="链接地址" label-width="100px">
          <el-input v-model="banner.linkUrl" clearable placeholder="链接地址"></el-input>
        </el-form-item>
        <el-form-item label="banner排序" label-width="100px">
          <el-input-number v-model="banner.sort" :min="0" placeholder="banner排序" controls-position="right"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleForBanner">取 消</el-button>
        <el-button type="primary" @click="sureForBanner">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>

  import bannerApi from '@/api/banner'

  export default {
    data() {
      return {
        // 查询参数对象
        bannerQuery: {
          current: 0,
          limit: 5
        },
        // 轮播图列表对象
        banners: [],
        // 轮播图实体对象
        banner: {
          "id": "",
          "title": "",
          "imageUrl": "",
          "linkUrl": "",
          "sort": ""
        },
        // 查询记录总数
        "total": "",

        // 获取dev.env.js里面地址
        BASE_API: process.env.BASE_API,
        // 上传banner列表
        fileList: [],

        // 弹窗标题
        "dialogTitle": "",
        // 添加banner对话框默认关闭
        "dialogFormVisibleForBanner": false,
        // 图片大小超长标识位
        "flag": false
      }
    },
    created() {
      this.selectAllBanners();
    },
    methods: {
      // 查询banner信息列表
      selectAllBanners() {
        bannerApi.selectAllBanners(this.bannerQuery)
          // 访问成功
          .then(res => {
              // 结果集
              this.banners=res.data.items;
              // 总记录数
              this.total=res.data.total;
            }
          ).catch(err => {
            this.$message.error('查询轮播图信息失败');
            }
          );
      },
      // 跳转当前页
      changeCurrent(current) {
        this.bannerQuery.current=current;
        this.selectAllBanners();
      },
      // 修改当前页面最大查看记录数
      changeLimit(limit) {
        this.bannerQuery.limit=limit;
        this.selectAllBanners();
      },
      // 图片大小限制
      handleExceed(file) {
        if (file.size / 1024 / 1024 > 0.8) {
          this.flag=true;
          return false;
        }
        return true;
      },
      // 新增banner
      openAddBanner() {
        // 打开新增对话框
        // 清空banner
        this.banner.id="";
        this.banner.title="";
        this.banner.imageUrl="";
        this.banner.linkUrl="";
        this.$set(this.banner,'sort',0);
        // 清空图片上传列表
        this.fileList=[];
        this.dialogFormVisibleForBanner=true;
      },
      // 修改banner
      openUpdateBanner(banner) {
        // 校验参数
        if(!banner.id) {
          this.$message.error('banner id不能为空');
          return ;
        }
        if(!banner.title) {
          this.$message.error('banner名称不能为空');
          return ;
        }
        if(!banner.imageUrl) {
          this.$message.error('banner图片不能为空');
          return ;
        }
        if(!banner.linkUrl) {
          this.$message.error('banner链接不能为空');
          return ;
        }
        if(banner.sort==null || banner.sort=="") {
          this.$message.error('banner排序不能为空');
          return ;
        }
        // 初始化banner
        this.banner.id=banner.id;
        this.banner.title=banner.title;
        this.banner.imageUrl=banner.imageUrl;
        this.banner.linkUrl=banner.linkUrl;
        this.$set(this.banner,'sort',banner.sort);
        // 打开对话框
        this.dialogFormVisibleForBanner=true;
      },
      // 关闭对话框
      cancleForBanner() {
        this.dialogFormVisibleForBanner=false;
      },
      // 删除banner
      deleteBanner(banner) {
        // 校验id
        if(!banner.id) {
          this.$message.error('banner id不能为空');
          return ;
        }
        // 提示是否真的要删除
        this.$confirm(`确定删除banner：<span style="color: orange;">${banner.title}</span> ?`, '删除banner', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true  // 使用html片段
        }).then(() => {
          // 执行删除操作
          bannerApi.deleteBanner(banner.id)
            .then(res => {
                // 重新渲染表格
                this.selectAllBanners();
                // 提示信息
                this.$message({
                  type: 'success',
                  message: '删除成功',
                });
              }
            ).catch(err => {
                this.$message.error('删除失败');
              }
            );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 点击确定按钮
      sureForBanner() {
        // 判断是否为为空
        if(!this.banner.title) {
          this.$message.error('banner名称不能为空');
          return ;
        }
        if(!this.banner.imageUrl) {
          this.$message.error('banner图片不能为空');
          return ;
        }
        if(!this.banner.linkUrl) {
          this.$message.error('banner链接不能为空');
          return ;
        }
        if(this.banner.sort==null || this.banner.sort==="") {
          this.$message.error('banner排序不能为空');
          return ;
        }
        // id不为空则表示为修改
        if(this.banner.id) {
          this.updateBanner();
          return ;
        }
        // id为空则表示为新增
        this.addBanner();
      },
      // 执行新增操作
      addBanner() {
        bannerApi.addBanner(this.banner)
          .then(res => {
            // 重新渲染表格
            this.selectAllBanners();
            // 关闭对话框
            this.dialogFormVisibleForBanner=false;
            // 清空图片上传列表
            this.fileList=[];
            // 提示信息
            this.$message({
              type: 'success',
              message: '新增成功',
            });
          }).catch(err => {
            this.$message.error(err.message);
          });
      },
      // 执行修改操作
      updateBanner() {
        bannerApi.updateBanner(this.banner)
          .then(res => {
            // 重新渲染表格
            this.selectAllBanners();
            // 关闭对话框
            this.dialogFormVisibleForBanner=false;
            // 提示信息
            this.$message({
              type: 'success',
              message: '修改成功',
            });
          }).catch(err => {
            this.$message.error(err.message);
          });
      },
      // 上传图片成功回调方法
      uploadImageSuccess(res,file,fileList) {
        // url不为空
        if(res.data && res.data.url) {
          // 获取图片url
          this.banner.imageUrl=res.data.url;
          // 提示上传成功
          this.$message({
            type: 'success',
            message: res.message,
          });
        }
      },
      // 图片移除
      beforeImageRemove(file,fileList) {
        // 执行删除
        // 暂未提供图片删除的方法
        this.banner.imageUrl="";
        if(this.flag) {
          this.flag=false;
          this.$message.error('上传banner图片大小不能超过 800Kb!');
          return ;
        }
        this.$message({
          type: 'success',
          message: "图片删除成功",
        });
      }
    }
  }

</script>
